<template>
  <div class="swagger-container">
    <div class="swagger-card">
      <div class="swagger-icon">
        <i class="el-icon-document"></i>
      </div>
      <div class="swagger-content">
        <h2>API 接口文档</h2>
        <p>查看系统所有接口的详细说明和测试</p>
        <el-button
          type="primary"
          size="large"
          @click="openSwagger"
          class="swagger-button"
        >
          打开接口文档
          <i class="el-icon-right"></i>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Swagger",
  methods: {
    openSwagger() {
      window.open("http://localhost:8000/swagger-ui/index.html", "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.swagger-container {
  padding: 20px;
  height: 100%;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;

  .swagger-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 400px;
    text-align: center;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    }

    .swagger-icon {
      font-size: 48px;
      color: #409eff;
      margin-bottom: 20px;

      i {
        font-size: 48px;
      }
    }

    .swagger-content {
      h2 {
        color: #303133;
        margin-bottom: 10px;
        font-size: 24px;
      }

      p {
        color: #606266;
        margin-bottom: 30px;
        font-size: 14px;
      }

      .swagger-button {
        padding: 12px 30px;
        font-size: 16px;
        border-radius: 4px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateX(5px);
        }

        i {
          margin-left: 5px;
          transition: transform 0.3s ease;
        }

        &:hover i {
          transform: translateX(3px);
        }
      }
    }
  }
}
</style>
